import React, { Component } from 'react'

export default class Item extends Component {
  state = {
    flag: false,
  }

  handleMouse = bool => {
    return () => {
      this.setState({ flag: bool })
    }
  }

  // 勾选/取消勾选
  handleCheck = id => {
    return e => {
      // console.log(id, e.target.checked)
      this.props.changeChecked(id, e.target.checked)
    }
  }

  handleClick = id => {
    // console.log(id)
    if (window.confirm('确定删除吗?')) {
      this.props.delTodo(id)
    }
  }

  render() {
    const { name, done, id } = this.props
    const { flag } = this.state
    return (
      <li
        style={{ background: flag ? '#f5f5f5' : '#fff' }}
        onMouseLeave={this.handleMouse(false)}
        onMouseEnter={this.handleMouse(true)}
      >
        <div className="view">
          <input
            className="toggle"
            type="checkbox"
            checked={done}
            onChange={this.handleCheck(id)}
          />
          <label>{name}</label>
          <button className="destroy" onClick={() => this.handleClick(id)}></button>
        </div>
        <input className="edit" value="Rule the web" onChange={() => {}} />
      </li>
    )
  }
}
